<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的小餐桌 - 我的</title>
    <link rel="stylesheet" href="styles.css">
    <link href="https://cdn.jsdelivr.net/npm/lucide-static@latest/font/lucide.min.css" rel="stylesheet">
</head>
<body>
    <div class="device-container">
        <!-- 状态栏 -->
        <div class="status-bar">
            <div class="status-bar-left">9:41</div>
            <div class="status-bar-right">
                <span class="lucide-wifi"></span>
                <span class="lucide-battery"></span>
            </div>
        </div>
        
        <!-- 应用内容 -->
        <div class="app-container">
            <!-- 个人信息 -->
            <div class="profile-header">
                <img src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3" alt="用户头像" class="profile-avatar">
                <div>
                    <div class="profile-name">小厨师</div>
                    <div class="profile-bio">热爱美食，享受烹饪的乐趣</div>
                </div>
            </div>
            
            <!-- 数据统计 -->
            <div style="display: flex; justify-content: space-around; padding: 15px; background-color: white; margin-bottom: 10px;">
                <div style="text-align: center;">
                    <div style="font-weight: 600; font-size: 18px;">15</div>
                    <div style="color: #777; font-size: 14px;">菜谱</div>
                </div>
                <div style="text-align: center;">
                    <div style="font-weight: 600; font-size: 18px;">8</div>
                    <div style="color: #777; font-size: 14px;">收藏</div>
                </div>
                <div style="text-align: center;">
                    <div style="font-weight: 600; font-size: 18px;">30</div>
                    <div style="color: #777; font-size: 14px;">饮食计划</div>
                </div>
            </div>
            
            <!-- 设置选项 -->
            <div class="settings-group">
                <div class="settings-title">个性化设置</div>
                
                <!-- 主题色设置 -->
                <div class="settings-option">
                    <div>主题色</div>
                </div>
                <div class="color-options">
                    <div class="color-option active theme-green" style="background-color: #4CAF50;" onclick="switchTheme('theme-green', this)"></div>
                    <div class="color-option theme-yellow" style="background-color: #FFC107;" onclick="switchTheme('theme-yellow', this)"></div>
                    <div class="color-option theme-blue" style="background-color: #2196F3;" onclick="switchTheme('theme-blue', this)"></div>
                    <div class="color-option theme-purple" style="background-color: #9C27B0;" onclick="switchTheme('theme-purple', this)"></div>
                </div>
                
                <!-- 字体设置 -->
                <div class="settings-option">
                    <div>字体样式</div>
                </div>
                <div class="font-options">
                    <div class="font-option active" onclick="switchFont('font-default', this)">默认</div>
                    <div class="font-option" onclick="switchFont('font-round', this)">圆体</div>
                    <div class="font-option" onclick="switchFont('font-serif', this)">楷体</div>
                </div>
                
                <!-- 布局设置 -->
                <div class="settings-option">
                    <div>布局模式</div>
                </div>
                <div class="layout-options">
                    <div class="layout-option active" onclick="switchLayout('layout-list', this)">列表</div>
                    <div class="layout-option" onclick="switchLayout('layout-grid', this)">网格</div>
                </div>
            </div>
            
            <!-- 其他设置 -->
            <div class="settings-group">
                <div class="settings-title">应用设置</div>
                
                <div class="settings-option">
                    <div style="display: flex; align-items: center;">
                        <span class="lucide-bell" style="margin-right: 10px;"></span>
                        <span>通知设置</span>
                    </div>
                    <span class="lucide-chevron-right"></span>
                </div>
                
                <div class="settings-option">
                    <div style="display: flex; align-items: center;">
                        <span class="lucide-shield" style="margin-right: 10px;"></span>
                        <span>隐私设置</span>
                    </div>
                    <span class="lucide-chevron-right"></span>
                </div>
                
                <div class="settings-option">
                    <div style="display: flex; align-items: center;">
                        <span class="lucide-help-circle" style="margin-right: 10px;"></span>
                        <span>帮助与反馈</span>
                    </div>
                    <span class="lucide-chevron-right"></span>
                </div>
                
                <div class="settings-option">
                    <div style="display: flex; align-items: center;">
                        <span class="lucide-info" style="margin-right: 10px;"></span>
                        <span>关于应用</span>
                    </div>
                    <span class="lucide-chevron-right"></span>
                </div>
            </div>
            
            <!-- 登出按钮 -->
            <div style="padding: 20px;">
                <button class="button ghost" style="width: 100%; color: #E53935; border-color: #E53935;">退出登录</button>
            </div>
        </div>
        
        <!-- 底部导航栏 -->
        <div class="navbar">
            <a href="kitchen.html" class="nav-item">
                <span class="lucide-chef-hat nav-icon"></span>
                <span>厨房</span>
            </a>
            <a href="mealplan.html" class="nav-item">
                <span class="lucide-calendar nav-icon"></span>
                <span>饮食计划</span>
            </a>
            <a href="discover.html" class="nav-item">
                <span class="lucide-compass nav-icon"></span>
                <span>发现</span>
            </a>
            <a href="profile.html" class="nav-item active">
                <span class="lucide-user nav-icon"></span>
                <span>我的</span>
            </a>
        </div>
    </div>
    
    <script>
        // 切换主题色
        function switchTheme(themeClass, element) {
            // 移除所有主题类
            document.body.classList.remove('theme-green', 'theme-yellow', 'theme-blue', 'theme-purple');
            // 添加新主题类
            document.body.classList.add(themeClass);
            
            // 更新选中状态
            document.querySelectorAll('.color-option').forEach(option => {
                option.classList.remove('active');
            });
            element.classList.add('active');
        }
        
        // 切换字体
        function switchFont(fontClass, element) {
            // 移除所有字体类
            document.body.classList.remove('font-default', 'font-round', 'font-serif');
            // 添加新字体类
            document.body.classList.add(fontClass);
            
            // 更新选中状态
            document.querySelectorAll('.font-option').forEach(option => {
                option.classList.remove('active');
            });
            element.classList.add('active');
        }
        
        // 切换布局
        function switchLayout(layoutClass, element) {
            // 移除所有布局类
            document.body.classList.remove('layout-list', 'layout-grid');
            // 添加新布局类
            document.body.classList.add(layoutClass);
            
            // 更新选中状态
            document.querySelectorAll('.layout-option').forEach(option => {
                option.classList.remove('active');
            });
            element.classList.add('active');
        }
    </script>
</body>
</html> 